<template>
  <div class="container">
    <div class="input_modal">
      <div class="input-item">
        <span>商品 ID：</span>
        <el-input
          v-model="searchParams.productCode"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <div class="input-item">
        <span>商品名称：</span>
        <el-input
          v-model="searchParams.productTitle"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <div class="input-item">
        <span>成交时间：</span>
        <el-date-picker
          v-model="dateArr"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleChangeDate"
        >
        </el-date-picker>
      </div>
      <div class="input-item">
        <span>User ID：</span>
        <el-input
          v-model="searchParams.userCode"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <div class="input-item">
        <span>用户手机号：</span>
        <el-input
          v-model="searchParams.userMobile"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <div class="input-item">
        <span>订单号：</span>
        <el-input
          v-model="searchParams.orderCode"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <div class="input-item">
        <span>订单状态：</span>
        <el-select v-model="searchParams.orderStatus" placeholder="请选择">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="input-item">
        <span>收货人姓名：</span>
        <el-input
          v-model="searchParams.contactName"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <div class="input-item">
        <span>收货人手机号：</span>
        <el-input
          v-model="searchParams.telNumber"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <div class="input-item">
        <span>供应商：</span>
        <el-input
          v-model="searchParams.supplier"
          placeholder="请输入"
          class="proName"
          @keyup.enter.native="searchCity"
        />
      </div>
      <el-button type="primary" size="medium" @click="exportOrder()" icon="el-icon-download">批量导出</el-button>
      <el-button type="primary" size="medium" @click="getList()" icon="el-icon-search">查询</el-button>
    </div>
    <div class="table_con">
      <el-table
        :data="tableData"
        :border='false'
        v-loading="loading"
        :default-expand-all="true"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.orderItems"
              :border='false'
              class="second-table"
            >
              <el-table-column prop="modelSalePrice" label="">
                  <template slot-scope="scope1">
                    <img style="width:80px;height:80px;" :src="scope1.row.modelImageUrl" alt="">
                  </template>
              </el-table-column>
              <el-table-column prop="productCode" label="" width="180px">
                <template slot-scope="scope1">
                  <div>{{scope1.row.productTitle}}</div>
                  <div>颜色：{{scope1.row.modelName}} 尺码：{{scope1.row.modelSize}}</div>
                </template>
              </el-table-column>
              <el-table-column  prop="modelSalePrice" label=""></el-table-column>
              <el-table-column prop="count" label=""></el-table-column>
              <el-table-column prop="totalPrice" label="">
                <template slot-scope="scope1">
                  <div>{{scope1.row.totalPrice}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="userId" label="">
                <template slot-scope="scope1">
                  <div>User Id: {{scope.row.userId}}</div>
                  <div>用户手机号: {{scope.row.userMobile}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="" label="" width="200">
                <template slot-scope="scope">
                  <div>收货人姓名：{{scope.row.contactName}}</div>
                  <div>收货人手机号：{{scope.row.telNumber}}</div>
                </template>
              </el-table-column>
              <el-table-column :formatter="formatter" prop="supplier" label=""></el-table-column>
              <el-table-column prop="" label="操作" width='240'>
                <template slot-scope="scope">
                  <!-- <div>售后状态：{{refundStatusList.filter( item => {return item.value == scope.row.refundStatus}).length ? refundStatusList.filter( item => {return item.value == scope.row.refundStatus})[0].label : ''}}</div>
                  <div>售后类型：{{refundTypeList.filter( item => {return item.value == scope.row.refundType}).length ? refundTypeList.filter( item => {return item.value == scope.row.refundType})[0].label : ''}}</div> -->
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="productTitle" label="商品" width="240px">
          <template slot-scope="scope">订单编号:{{scope.row.orderCode}}</template>
        </el-table-column>
        <el-table-column prop="weight" label="单价">
          <template slot-scope="scope">总价:{{scope.row.totalPrice}}</template>
        </el-table-column>
        <el-table-column prop="productTitle" label="数量">
          <template slot-scope="scope">创建时间:</template>
        </el-table-column>
        <el-table-column prop="weight" label="实收款">
          <template slot-scope="scope">{{scope.row.gmtCreated}}</template>
        </el-table-column>
        <el-table-column prop="price" label="用户" >
          <template slot-scope="scope"></template>
        </el-table-column>
        <el-table-column prop="weight" label="收货人" width="200">
          <template slot-scope="scope">订单状态: {{statusDict[scope.row.orderStatus]}}</template>
        </el-table-column>
        <el-table-column prop="" label="供应商">
        </el-table-column>
        <el-table-column prop="" label="操作" width='240'>
          <template slot-scope="scope">
            <el-button icon="el-icon-view" type="primary" size="mini" @click="$router.push('/orderDetail?orderCode='+scope.row.orderCode)">查看</el-button>
            <el-button icon="el-icon-view" type="primary" size="mini" @click="handleCancel(scope.row.orderCode)" v-if="scope.row.orderStatus === 'WAIT_PAY'">取消</el-button>
            <el-button @click="sendProduct(scope.row)"  type="primary" size="mini" v-if="scope.row.orderStatus == 'WAIT_SEND'">发货</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :page-sizes='[10,20,30,40]'
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageCount"
      >
      </el-pagination>
    </div>
    <el-dialog title="发货信息" :visible.sync="dialogVisible" width="40%">
       <el-form
        label-width="100px"
      >
        <el-form-item
          label="物流公司："
          prop="logisticsCompany"
        >
          <el-input v-model="param.logisticsCompany" placeholder="请输入物流公司"></el-input>
        </el-form-item>
         <el-form-item
          label="物流单号："
          prop="logistics"
        >
          <el-input v-model="param.logistics" placeholder="请输入物流单号"></el-input>
        </el-form-item>
         <el-form-item
          label="备注："
          prop="sellerMemo"
        >
          <el-input type="textarea"  v-model="param.sellerMemo" placeholder="请输入备注"></el-input>
        </el-form-item>
       </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sendBtn">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  export default {
    data() {
      return {
        dialogVisible:false,
        tableData: [],
        searchParams: {
          productTitle: "",
          gmtCreatedGE: "",
          gmtCreatedLE: "",
          userCode: "",
          userMobile: "",
          orderStatus: "",
          contactName: "",
          telNumber: "",
          orderCode:"",
          supplier:""
        },
        param:{
          "logistics": "",
          "logisticsCompany": "",
          "orderCode": "",
          "sellerMemo": ""
        },
        dateArr: [],
        pageCount: null,
        pageIndex: 1,
        pageSize: 10,
        loading: true,
        id: "",
        name: "",
        statusDict: {
          "WAIT_SEND":"待发货",
          "WAIT_PAY": "未付款",
          "WAIT_GET": "待收货",
          "EVALUATION": "待评价",
          "CANCEL_TIMEOUT": "超时取消"
        },
        statusList: [{
          label: "全部",
          value: "",
        },{
          label: "已付款",
          value: "WAIT_SEND",
        },{
          label: "未付款",
          value: "WAIT_PAY",
        },{
          label: "待收货",
          value: "WAIT_GET",
        },{
          label: "待评价",
          value: "EVALUATION",
        },{
          label: "超时取消",
          value: "CANCEL_TIMEOUT",
        }
//          {
//            label: "已完成",
//            value: "COMPLETED",
//          }
        ],
        refundStatusList: [{
          label: "默认",
          value: "NORMAL"
        },{
          label: "待审核",
          value: "WAIT_AUDIT"
        },{
          label: "处理中",
          value: "IN_PROCESS"
        },{
          label: "售后成功",
          value: "SUCCESS"
        },{
          label: "售后失败",
          value: "FAILURE"
        }],
        refundTypeList: [{
          label: "默认",
          value: "NORMAL"
        },{
          label: "仅退款",
          value: "ONLYREFUND"
        },{
          label: "退货",
          value: "REFUND_GOODS"
        },{
          label: "换货",
          value: "EXCHANGE_GOODS"
        }],
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      getList: function() {
        let url = CONSTANT.URL.ORDER.orderList;
        if (this.dateArr && this.dateArr.length ==2) {
          this.searchParams.gmtCreatedGE = this.dateArr[0]
          this.searchParams.gmtCreatedLE = this.dateArr[1]
        }
        let data = Object.assign(this.searchParams, {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        });

        this.loading = true;
        common.post(url, data, res => {
          this.loading = false;
          let data = res.data;
          data.bussData.map( (item, index) => {
            item.orderItems.map( (order, i) => {
              data.bussData[index].orderItems[i] = Object.assign(data.bussData[index].orderItems[i], {
                contactName: item.contactName,
                telNumber: item.telNumber
              })
            })
          })
          this.tableData = data.bussData;
          this.pageCount = data.count;
        });
      },
      transferHtml(row, column, cellValue, index) {
        console.log(row, column, cellValue, index)
//        return this.$createElement("div","test")
      },
      sendBtn(){
        let url = CONSTANT.URL.ORDER.orderSend;
          common.post(url, this.param, res => {
            if (res.code == 200) {
              this.$message({
                  type: "success",
                  message: "发货成功!"
                });
                this.dialogVisible = false
                this.getList();
            } else {
              this.$message({
                type: "error",
                message: res.data.errMsg
              });
              this.loading = false;
            }
          });
      },
      sendProduct(obj) {
        this.param = {
          "logistics": "",
          "logisticsCompany": "",
          "orderCode": obj.orderCode,
          "sellerMemo": ""
        }
        this.dialogVisible = true
      },
      deleteItem(id) {
        this.$confirm("确定删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let url = CONSTANT.URL.LIST.DELETEGOOD;
            common.requestAjax(url, null, { id: id }, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getList();
              } else {
                this.$message({
                  type: "warning",
                  message: res.data.errMsg
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      handleCancel(code) {
        this.$confirm("确定取消订单?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let url = CONSTANT.URL.ORDER.cancelOrder;
            common.get(url, code, res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "取消成功!"
                });
                this.getList();
              } else {
                this.$message({
                  type: "warning",
                  message: res.msg
                });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      handleForbid(id) {},
      addItem() {
        this.$router.push("/productEdit");
      },
      editItem(id, type) {
        if (id == 1) {
          this.$router.push({
            name: "homeAdModal",
            query: { id: id, type: type, pageIndex: this.pageIndex }
          });
        } else if (id == 2) {
          this.$router.push({
            name: "homeBanner",
            query: { id: id, type: type, pageIndex: this.pageIndex }
          });
        } else if (id == 3) {
          this.$router.push({
            name: "homeFuncMenu",
            query: { id: id, type: type, pageIndex: this.pageIndex }
          });
        }
      },
      search: function(e) {
        if (e.keyCode == 13) {
          this.pageIndex = 1;
          this.getList();
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.getList();
      },
      searchCity() {},
      exportOrder() {
        const url = CONSTANT.URL.ORDER.orderExport
        common.post1(url, this.searchParams, res => {
          var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
          blob = URL.createObjectURL(blob)
          var fileName = "订单.xlsx"
          let link = document.createElement('a')
          link.href = blob
          link.download = fileName
          link.click()
          link.remove()

        })
      },
      handleChangeDate(e) {
        if (e && e.length > 0) {
          this.searchParams.gmtCreatedGE = e[0]
          this.searchParams.gmtCreatedLE = e[1]
        } else {
          this.searchParams.gmtCreatedGE = ''
          this.searchParams.gmtCreatedLE = ''
        }
      }
    },
    filters: {
      formatStatus(value) {
        var list = [];
        list["y"] = "上架";
        list["n"] = "下架";
        if (value) {
          return list[value];
        } else {
          return "--";
        }
      }
    }
  };
</script>

<style lang="scss">
  .el-table__expand-column {
    &:first-child {
      /*display: none;*/
      .cell {
        /*display: none;*/
      }
    }
  }

  .el-table__row.expanded {
    background-color: #dee8fb;
    &:hover {
      background-color: #dee8fb!important;
    }
  }

  .el-table__expanded-cell {
    padding: 0!important;
  }
  .second-table {
    /*margin-left: 48px;*/
      .el-table__header-wrapper{
        display: none;
      }
  }

</style>
